<template>
  <view class="myRightsBottomPopup">
    <u-popup style="position: relative;" v-model="filterBoxShow" mode="bottom" @close="handleClose"
      border-radius="36rpx" length="90%">
      <view class="wrapper" type="line">
        <view class="popupTop">
          <text class="mutiSelect" v-if="!mutiSelectAvtive" @click="changeMutiSelect">多选</text>
          <text class="mutiSelect" v-if="mutiSelectAvtive" @click="cancelMutiSelect">取消</text>
          <text class="popupTitle">发送结果</text>
          <img class="closeBtn" :src="closeBtn" @click="handleClose"></img>
        </view>
        <u-tabs v-if="filterBoxShow" :current="currentIndex" name="rightName" :list="rightsList"
          @change="handleCateClick" height="88" :active-item-style="activeItemStyle" :gutter="24" :bar-style="barStyle"
          font-size="28" :inactive-color="'#999999'" :bg-color="'#f5f5f5'"></u-tabs>
        <scroll-view scroll-y="true" style="height: 55vh;">
          <template v-for="(item,index) in selecetedFirstRight.children">
            <view class="rightCard" :key="item.rightName">
              <view class="rightCardTop">
                {{item.rightName}}
              </view>
              <!-- 先处理为空的情况 -->
              <template v-if="!item.children||item.children.length==0">
                <view class="emptyText">
                  暂无
                </view>
              </template>
              <template v-else>
                <view class="rightCardBody" v-for="_item,_index in item.children" :key="_item.fileUrl">
                  <view class="left"> <img :src="_item.rightImg" alt="" class="rightCardImg">
                    <view class="rightCardInfo">
                      <view class="rightCardName">{{handleSpecialRightName(_item)}}</view>
                      <view class="rightCardDesc">
                        {{handleRightDesc(_item)}}</view>
                    </view>
                  </view>
                  <view class="right">
                    <view v-if="!mutiSelectAvtive" class="bottomBtn" @click="handleSendZhituCard(_item)">发送</view>
                    <view v-if="mutiSelectAvtive&&_item.isPushed===false" class="circle" @click="addMutiList(_item)">
                    </view>
                    <view v-if="mutiSelectAvtive&&_item.isPushed===true" class="circleRight"
                      @click="editMutiList(_item)">
                    </view>
                  </view>
                </view>
              </template>
            </view>
          </template>
        </scroll-view>
      </view>
      <view class="bottom" v-if="mutiSelectAvtive && mutiList.length>0">
        <view class="alreadyChoose">已选<span>{{mutiList.length}}</span>个</view>
        <view class="confirmButton" @click="confirmSend">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getPersonRightList } from "@/api/modules/career.js";
export default {
  props: {
    isConsultant: {
      type: Boolean,
      default: false,
    },
    chatId: {
      type: Number,
      required: true,
    },
    selfInfo: {
      type: Object,
      required: true,
    },
  },
  computed: {
    chatRoles() {
      return this.isConsultant ? "10" : "20";
    },
  },
  data() {
    return {
      mutiList: [], // 存放多选文件的临时数组
      mutiSelectAvtive: false, // 判断当前多选是否处于激活状态
      closeBtn: this.$imgBase + "/careerPath/closeBtn.svg",
      filterBoxShow: false,
      currentIndex: 0,
      rightsList: [],
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      //在tab中选中的一项
      selecetedFirstRight: {},
      activeItemStyle: {
        "font-weight": "600",
        color: "#000000",
        "font-size": "32rpx",
      },
      barStyle: {
        width: "20px",
        height: "8px",
        background:
          "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #F75A3E 100%)",
        "border-radius": "4px",
        left: "0",
        bottom: "12rpx",
      },
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    handleRightDesc(rightItem) {
      if (rightItem.rightId == 1) {
        if (rightItem.extra) {
          return rightItem.extra.character;
        } else {
          return rightItem.rightDesc;
        }
      } else if (rightItem.rightId == 2) {
        return "职场守护兽：" + rightItem.extra.character;
      } else {
        return rightItem.rightDesc || "";
      }
    },
    // 统一发送多选的请求
    confirmSend() {
      console.log("this.mutiList", this.mutiList);
      this.mutiList.forEach((item, index) => {
        this.handleSendZhituCard(item);
        console.log("这是选择的第" + index + "文件");
      });
      this.mutiList = [];
    },
    // 多选状态下将每一个要发送的item添加到一个临时数组中，然后点击发送时遍历数组发送
    addMutiList(item) {
      item.isPushed = true;
      this.mutiList.push(item);
      console.log("item", item);
    },
    editMutiList(item) {
      this.mutiList.splice(this.mutiList.indexOf(item), 1); // 删除掉指定元素
      item.isPushed = false; // 然后把这一项的isPushed属性改回false表示没有被多选
    },
    // 修改当前的多选激活状态
    changeMutiSelect() {
      this.mutiSelectAvtive = !this.mutiSelectAvtive;
    },
    // 取消按钮 点击取消的时候所有多选数组变为空
    // 不用处理isPushed 下次点击多选按钮时会重置isPushed状态
    cancelMutiSelect() {
      this.mutiList = [];
      this.mutiSelectAvtive = !this.mutiSelectAvtive;
      this.rightsList.forEach((ele) => {
        ele.children.forEach((item) => {
          item.children.forEach((_item) => {
            _item.isPushed = false;
          });
        });
      });
    },
    handleSpecialRightName(right) {
      // console.log("handleSpecialRightName", right.rightName);
      //这里不但修改了显示，还修改了数据，后面发送的时候就直接用了修改后的rightName了
      switch (right.rightId) {
        case 4:
          right.rightName = "简历诊断结果";
          return "简历诊断结果";
        case 1:
          right.rightName = "性格测评";
          return "性格测评";
        case 2:
          right.rightName = "职业测评";
          return "职业测评";
        case 17:
          right.rightName = "AI面评";
          return "AI面评";

        default:
          return right.rightName;
      }
    },
    //点击发送之后组装发送卡片的内容
    handleSendZhituCard(item) {
      // console.log("用户结果卡片", item);

      let rightDesc = item.rightDesc;
      if (item.rightId == 2) {
        item.rightName = "职业测评";
        rightDesc = "职场守护兽：" + item.extra.character;
      } else if (item.rightId == 1) {
        item.rightName = "性格测评";
        if ((rightDesc = item.extra)) {
          rightDesc = item.extra.character;
        }
      }
      var content = {
        send_uid: this.selfInfo.username,
        receive_uid: this.chatId,
        content: item.rightName + " 结果卡片",
        share: {
          type: 202,
          isCardService: 1,
          service: {
            rightName: item.rightName,
            cancelText: "",
            confirmText: "",
            rightImg: item.rightImg,
            rightId: item.rightId,
            titleImg: item.rightImg,
            extra: item.extra,
            rightDesc: rightDesc,
            finishType: item.finishType,
            rightStatus: item.rightStatus,
            fileUrl: item.fileUrl,
            rightPersonId: this.personId,
            rightPersonName:
              this.selfInfo.info.nickname || uni.getStorageSync("personName"),
          },
        },
        person_iname: this.selfInfo.info.nickname,
        person_pic: this.selfInfo.info.extras.GET_PIC,
        is_send: "1",
        idate: new Date().getTime(),
      };
      console.log("组装之后的content", content);
      this.$emit("createMsgContent", content);
      this.handleClose();
    },
    handleRightstatus(rightStatus) {
      switch (rightStatus) {
        case 0:
          return "未开放";
        case 1:
          return "未开始";
        case 2:
          return "已完成";
        case 3:
          return "已过期";
        case 4:
          return "未购买";
        default:
          return "未开放";
      }
    },
    init() {
      this.filterBoxShow = true;
      this.currentIndex = 0;
      this.reqGetPersonRightList();
    },
    handleClose() {
      this.filterBoxShow = false;
      this.mutiSelectAvtive = false;
      this.mutiList = [];
      if (this.rightsList.length > 0) {
        this.rightsList.forEach((ele) => {
          if (ele.children) {
            ele.children.forEach((item) => {
              if (item.children) {
                item.children.forEach((_item) => {
                  _item.isPushed = false;
                });
              }
            });
          }
        });
      }
    },
    //tab切换
    handleCateClick(index) {
      this.currentIndex = index;
      this.selecetedFirstRight = this.rightsList[index];
      // console.log("selecetedFirstRight", this.selecetedFirstRight);
    },
    //获取权益列表
    reqGetPersonRightList() {
      const params = {
        consultantId: this.isConsultant
          ? this.personId
          : uni.getStorageSync("consultantId").replace("_consultant", ""),
        personId: this.isConsultant ? this.chatId : this.personId,
        // consultantId: 7846546,
        // personId: 7846546,
        chatRoles: this.chatRoles,
      };
      getPersonRightList(params)
        .then((res) => {
          if (res.code == 200) {
            this.rightsList = res.data;
            // 为每一个可以发送的card添加一个isPushed属性
            // true代表多选时已经选中 false代表多选时没选中
            if (this.rightsList.length > 0) {
              this.rightsList.forEach((ele) => {
                if (ele.children) {
                  ele.children.forEach((item) => {
                    if (item.children) {
                      item.children.forEach((_item) => {
                        _item.isPushed = false;
                      });
                    }
                  });
                }
              });
            }
            this.selecetedFirstRight = this.rightsList[0];
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-message: $img-base + "careerPath/";
.wrapper {
  background-color: #f5f5f5;
}
.popupTop {
  padding: 38rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .mutiSelect {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
  }
  .popupTitle {
    font-size: 36rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 40rpx;
  }
  .closeBtn {
    width: 30rpx;
    height: 30rpx;
  }
}
.rightCard {
  // min-height: 268rpx;
  // border-radius: 16rpx;
  // background: linear-gradient(180deg, #fff7ed 0%, #ffffff 40%);
  // border-radius: 16rpx;
  margin: 0 32rpx 28rpx;
  // padding: 22rpx 20rpx;
  // margin-bottom: 40rpx;

  .rightCardTop {
    display: inline-block;
    padding: 12rpx 20rpx;
    background: #e9e9e9;
    border-radius: 8rpx;
    margin-bottom: 16rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 40rpx;
  }
  .emptyText {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 40rpx;
    padding: 0 20rpx;
  }
  .rightCardBody {
    display: flex;
    justify-content: space-between;
    border-radius: 8rpx;
    background: #ffffff;
    padding: 20rpx 20rpx;
    margin-bottom: 16rpx;
    &:last-of-type {
      margin-bottom: 0;
    }
    .left {
      display: flex;
      .rightCardImg {
        width: 104rpx;
        height: 104rpx;
        margin-right: 16rpx;
        min-width: 104rpx;
        border-radius: 2rpx;
      }
      .rightCardInfo {
        display: flex;
        flex-direction: column;
        padding-top: 8rpx;
        .rightCardName {
          font-size: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 44rpx;
          margin-bottom: 16rpx;
          .character {
            color: #000000;
          }
        }
        .rightCardDesc {
          display: inline-block;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #bfbfbf;
          line-height: 36rpx;
          max-width: 350rpx;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .right {
      display: flex;
      align-items: flex-end;
      .bottomBtn {
        min-width: 137rpx;
        background: #ffffff;
        border-radius: 32rpx;
        border: 2rpx solid #d3d3d3;
        padding: 8rpx 40rpx;
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #f75a3e;
        line-height: 36rpx;
      }
      .circle,
      .circleRight {
        width: 52rpx;
        height: 52rpx;

        border-radius: 32rpx;
        border: 2rpx solid #d3d3d3;
      }
      .circle {
        background: #ffffff;
      }
      .circleRight {
        background-image: url($img-base-message + "confirmRight.png");
        background-size: 100% 100%;
      }
    }
  }
  .rightCardBottom {
    display: flex;
    justify-content: flex-end;
    .bottomBtn {
      padding: 8rpx 40rpx;
      color: #f75a3e;
      border-radius: 32rpx;
      border: 2rpx solid #d3d3d3;
    }
  }
}
.bottom {
  width: 90vw;
  position: absolute;
  margin: 0 32rpx;
  bottom: 100rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .alreadyChoose {
    font-size: 30rpx;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #555555;
    span {
      color: #ff835d;
      margin: 0 20rpx;
    }
  }
  .confirmButton {
    width: 234rpx;
    height: 80rpx;
    background: #f75a3e;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
  }
}
::v-deep.u-drawer__scroll-view {
  background-color: #f5f5f5;
}
</style>